import React from 'react'
import Platform from 'Platform'
import { connect } from 'react-redux'
import {
  TextInput,
  Text,
  TouchableOpacity,
  StyleSheet,
  View,
  Alert,
} from 'react-native'
import {register} from '../actions/register'
import Spinner from 'react-native-loading-spinner-overlay'

export class RegisterContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isRegisting: false,
    }
  }
  
  shouldComponentUpdate(nextProps, nextState){
    if (nextProps.isRegisterSuccess === true && nextProps.errorMessage === 'OK' && nextProps.isRegisting !== true) {
      this.props.navigator.pop();
    } 
    else if (nextProps.errorMessage !== 'OK' && nextProps.isRegisting === false 
    && nextState.isRegisting !== false) { 
      Alert.alert('提示', nextProps.errorMessage, [
        {text: 'OK', onPress:() => {this.setState({isRegisting: false})}}
        ]);
    }
    else if(nextProps.errorMessage === 'OK'){
      this.state.isRegisting = true;
    }
    return true;
  }


  
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.backButton} onPress={
          () => this.props.actions.pop()}>
          <Text style={{color: 'blue', fontSize: 18}}>{'< '+'返回'}</Text>
        </TouchableOpacity>
        <Spinner visible={this.state.isRegisting} size={'large'}/>
        <TextInput placeholder={'  用  户  名'} 
        style={Platform.OS==='ios'?styles.textInputIOS:styles.textInputAndroid} 
        onChangeText={(text) => this.setState({uname:text})}/>
        <TextInput placeholder={'  密        码'} 
        style={Platform.OS==='ios'?styles.textInputIOS:styles.textInputAndroid} 
        onChangeText={(text) => this.setState({pwd:text})} secureTextEntry={true}/>
        <TextInput placeholder={'  重复密码'} 
        style={Platform.OS==='ios'?styles.textInputIOS:styles.textInputAndroid} 
        onChangeText={(text) => this.setState({repwd:text})} secureTextEntry={true}/>
        <TextInput placeholder={'  手        机'} 
        style={Platform.OS==='ios'?styles.textInputIOS:styles.textInputAndroid} 
        onChangeText={(text) => this.setState({phone:text})}/>
        <TextInput placeholder={'  邮        箱'} 
        style={Platform.OS==='ios'?styles.textInputIOS:styles.textInputAndroid} 
        onChangeText={(text) => this.setState({email:text})}/>
        <TouchableOpacity style={styles.loginBtn} 
        onPress={() => this.props.dispatch(register(this.state.uname, this.state.pwd, this.state.phone))}>
          <Text style={styles.btnTitle}>注册</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  backButton: {
    marginTop: 30,
    marginLeft: 10,
    height: 100,
  },
  textInputIOS: {
      marginLeft: 30,
      marginTop: 10,
      height: 40,
      marginRight: 30,
      borderWidth: 0.28,
      borderRadius: 5,
    },
    textInputAndroid: {
      marginLeft: 30,
      marginTop: 10,
      height: 40,
      marginRight: 30,
    },
    loginBtn: {
      marginTop: 10,
      marginLeft: 30,
      marginRight: 30,
      height: 40,
      backgroundColor: 'red',
      justifyContent: 'center',
      borderRadius: 5,
    },
    btnTitle: {
      textAlign: 'center',
      color: 'white',
      fontSize: 17,
    },
});

const MapStateToProps = (state) => {
  return {
    isRegisting: state.register.isRegisting,
    isRegisterSuccess: state.register.isRegisterSuccess,
    errorMessage: state.register.errorMessage,
  };
}

export default connect(MapStateToProps)(RegisterContainer);